import { memo, useState } from "react";
import ModalFrom from "../../components/modalForm";
import Buttons from "../../components/button";
import { ButtonChangePorps, ButtonItem } from "../../type/button";
import { Button, Table, Image, message } from "antd";
import { Key } from "antd/es/table/interface";
import { useFetchTableList } from "../../hooks/use-fetch-table-list";
import { createBanner, getBannerTable } from "../../api/banner";
import { useDeleteTable } from "../../hooks/use-delete-table";
import { delTableData } from "../../api/active";
import { bannerCreateProp } from "../../type/banner";
const Index = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([]);
  const [open, setOpen] = useState<boolean>(false);

  const { dataSource, total, filterParams, setFilterParams } =
    useFetchTableList({
      API: getBannerTable,
    });
  const onButtonChange = (keys: ButtonChangePorps) => {
    const { value } = keys;
    if (value === "删除") {
      const changeDeleteProps = selectedRowKeys.map((ite: any) =>
        ite.toString()
      );
      setDeleteProps(changeDeleteProps);
    } else if (value === "刷新") {
      setFilterParams({
        page: 1,
      } as any);
    } else if (value === "新增") {
      setOpen(true);
    }
  };
  const buttonList: ButtonItem[] = [
    {
      label: "刷新",
      danger: false,
      disabled: false,
    },
    {
      type: "primary",
      label: "新增",
      danger: false,
      disabled: false,
    },
    {
      type: "primary",
      danger: true,
      disabled: selectedRowKeys.length===0,
      label: "删除",
    },
  ];
  const columns = [
    {
      title: "图片",
      dataIndex: "imgUrl",
      key: "key",
      width: 100,
      render: (text: any) => {
        return <Image width={50} src={text} key={text} />;
      },
    },
    {
      title: "操作",
      dataIndex: "actions",
      key: "key",
      render: (text: any, item: any) => {
        return (
          <Button
            danger
            onClick={() => {
              deleteTable([item.key.toString()]);
            }}
          >
            删除
          </Button>
        );
      },
    },
  ];
  const { setDeleteProps, deleteTable } = useDeleteTable({
    API: delTableData,
    title: "就是要删除你呢",
    success: () => {
      setSelectedRowKeys([]);
      // 根据业务逻辑 删除成功以后要重置分页参数为1
      setFilterParams({ ...filterParams, page: 1 });
    },
  });
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const closeModal = () => {
    setOpen(false);
  };
  const onOk = async (val: bannerCreateProp) => {
    const result: any = await createBanner(val);
    message.success(result.message);
    setFilterParams({
      page: 1,
    } as any);
  };
  const FormFiledList = [
    {
      type: "Input",
      name: "imgUrl",
      label: "图片",
      required: true,
      message: "请输入图片地址",
    },
  ];
  return (
    <div>
      <Buttons
        buttonConfig={buttonList}
        onChange={(buttonChangeProp: ButtonChangePorps) =>
          onButtonChange(buttonChangeProp)
        }
      />
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={dataSource}
        style={{ marginTop: "20px" }}
        pagination={{
          total,
          pageSize: filterParams.pageSize,
          current: filterParams.page,
          onChange: (page) => {
            setFilterParams({
              ...filterParams,
              page,
            });
          },
        }}
      />
      <ModalFrom
        close={closeModal}
        onOk={(val) => onOk(val)}
        FormFiledList={FormFiledList}
        modalTitle="新增"
        openModalFlag={open}
      />
    </div>
  );
};

export default memo(Index);
